<template>
  <div class="container">
    <el-form :inline="true" :model="dataForm"
    >
      <el-form-item label="选择代理：">
        <el-select v-model="dataForm.uid"
                   clearable
                   filterable
                   remote
                   :remote-method="getMemberList"
                   :loading="MemberListLoading"
                   reserve-keyword placeholder="输入代理名称或手机号">
          <el-option
            v-for="item in memberList"
            :key="item.id"
            :label="item.nickname"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" :class="[selectCard === 'card-1' ? 'card-panel-select' : '']" @click="fundList">
          <div class="card-panel-text">
            货款记录
          </div>
          <count-to :start-val="0" :end-val="count.money" :duration="3000" class="card-panel-num"/>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" :class="[selectCard === 'card-2' ? 'card-panel-select' : '']" @click="refundHistoryList(0)">
          <div class="card-panel-text">
            个人充值记录
          </div>
          <count-to :start-val="0" :end-val="count.one" :duration="3000" class="card-panel-num"/>
        </div>

      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" :class="[selectCard === 'card-3' ? 'card-panel-select' : '']" @click="refundHistoryList(1)">
          <div class="card-panel-text">
            下级充值记录
          </div>
          <count-to :start-val="0" :end-val="count.num" :duration="3000" class="card-panel-num"/>
        </div>

      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" :class="[selectCard === 'card-4' ? 'card-panel-select' : '']" @click="integrationHistoryList">
          <div class="card-panel-text">
            积分记录
          </div>
          <count-to :start-val="0" :end-val="count.integration" :duration="3000" class="card-panel-num"/>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-card class="card" v-show="status===0">
        <h3>{{ title }}</h3>
        <el-table
          v-loading="loading"
          :data="data"
          size="small"
          border
          style="width: 100%;text-align-all: center"
          :header-cell-style="{background:'#EAE9E9FF'}"
        >
          <el-table-column prop="uid" label="用户id"/>
          <el-table-column prop="realName" label="用户"/>
          <el-table-column prop="price" label="变动金额">
            <template slot-scope="scope">
              <div v-if="scope.row.price < 0" style="color: red">{{ scope.row.price }}</div>
              <div v-if="scope.row.price > 0" style="color: green">{{ scope.row.price }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="变动类型">
            <template slot-scope="scope">
              <div v-if="scope.row.type=== 0">余额</div>
              <div v-if="scope.row.type=== 1">积分</div>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="500px">
            <template slot-scope="scope">
              <span>{{ scope.row.remark }}</span>
              <span v-if="scope.row.orderSn">...</span>
              <el-button v-if="scope.row.orderSn" type="text" @click="orderDetailHandler(scope.row.orderSn)" v-has-permission="['oms:order:infoByOrderSn']">查看详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="添加时间" width="200px"/>
          <el-table-column
            label="管理"
            align="center"
            width="240px"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="danger" v-has-permission="['ums:fund:delete']"
                         @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-card>
      <el-card class="card" v-show="status===1">
        <h3>{{ title }}</h3>
        <el-table
          v-loading="loading"
          :data="rechargeList"
          size="small"
          border
          style="width: 100%;text-align-all: center"
          :header-cell-style="{background:'#EAE9E9FF'}"
        >
          <el-table-column prop="nickname" label="充值用户"/>
          <el-table-column prop="phone" label="手机号"/>
          <el-table-column prop="levelId" label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.levelId === undefined">余额充值</div>
              <div v-if="scope.row.levelId !== undefined">升级充值</div>
            </template>
          </el-table-column>
          <el-table-column prop="applyTime" label="申请充值时间"/>
          <el-table-column prop="otPrice" label="充值金额" width="90%"/>
          <el-table-column prop="price" label="实际到账金额" width="90%"/>
          <el-table-column prop="rechargeMode" label="充值方式">
            <template slot-scope="scope">
              <div v-if="scope.row.rechargeMode=== 0">微信</div>
              <div v-if="scope.row.rechargeMode=== 2" style="color: green">线下打款</div>
              <div v-if="scope.row.rechargeMode=== 1">支付宝</div>
              <div v-if="scope.row.rechargeMode=== 3">上级充值</div>
            </template>
          </el-table-column>
          <el-table-column prop="prove" label="充值证明">
            <template slot-scope="scope">
              <el-image :src="scope.row.prove" style="width: 50px;height: 50px" :preview-src-list="[scope.row.prove]">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"/>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="审核备注"/>
          <el-table-column prop="examineTime" label="审核时间"/>
          <el-table-column prop="status" label="状态" width="80px">
            <template slot-scope="scope">
              <div v-if="scope.row.status === 1" style="color: #13ce66;font-weight: bold">
                已处理
              </div>
              <div v-if="scope.row.status === -1" style="color: black;">
                已驳回
              </div>
              <div v-if="scope.row.status === 0" style="color: red;font-weight: bold">
                待审核
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="管理"
            align="center"
            width="150px"
          >
            <template slot-scope="scope">
              <el-dropdown size="small" split-button type="primary" trigger="click">
                操作
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button
                      v-if="scope.row.status === 0 && scope.row.rechargeMode === 2"
                      size="mini"
                      type="success"
                      @click="agree(scope.row.id)"
                      v-has-permission="['ums:recharge:success']"
                    >通过
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button
                      v-if="scope.row.status === 0 && scope.row.rechargeMode === 2"
                      size="mini"
                      type="danger"
                      @click="reject(scope.row.id)"
                      v-has-permission="['ums:recharge:reject']"
                    >驳回
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button size="mini" type="warning" @click="rechargeDelete(scope.row)"
                               v-has-permission="['ums:recharge:delete']">删除
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle1"
          @current-change="currentChangeHandle1"
          :current-page="pageIndex1"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize1"
          :total="totalPage1"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-card>
      <el-card class="card" v-show="status===2">
        <h3>{{ title }}</h3>
        <el-table
          v-loading="loading"
          :data="rechargeList"
          size="small"
          border
          style="width: 100%;text-align-all: center"
          :header-cell-style="{background:'#EAE9E9FF'}"
        >
          <el-table-column prop="nickname" label="充值用户"/>
          <el-table-column prop="phone" label="手机号"/>
          <el-table-column prop="levelId" label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.levelId === undefined">余额充值</div>
              <div v-if="scope.row.levelId !== undefined">升级充值</div>
            </template>
          </el-table-column>
          <el-table-column prop="applyTime" label="申请充值时间"/>
          <el-table-column prop="otPrice" label="充值金额" width="90%"/>
          <el-table-column prop="price" label="实际到账金额" width="90%"/>
          <el-table-column prop="rechargeMode" label="充值方式">
            <template slot-scope="scope">
              <div v-if="scope.row.rechargeMode=== 0">微信</div>
              <div v-if="scope.row.rechargeMode=== 2" style="color: green">线下打款</div>
              <div v-if="scope.row.rechargeMode=== 1">支付宝</div>
              <div v-if="scope.row.rechargeMode=== 3">上级充值</div>
            </template>
          </el-table-column>
          <el-table-column prop="prove" label="充值证明">
            <template slot-scope="scope">
              <el-image :src="scope.row.prove" style="width: 50px;height: 50px" :preview-src-list="[scope.row.prove]">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"/>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="审核备注"/>
          <el-table-column prop="examineTime" label="审核时间"/>
          <el-table-column prop="status" label="状态" width="80px">
            <template slot-scope="scope">
              <div v-if="scope.row.status === 1" style="color: #13ce66;font-weight: bold">
                已处理
              </div>
              <div v-if="scope.row.status === -1" style="color: black;">
                已驳回
              </div>
              <div v-if="scope.row.status === 0" style="color: red;font-weight: bold">
                待审核
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="管理"
            align="center"
            width="150px"
          >
            <template slot-scope="scope">
              <el-dropdown size="small" split-button type="primary" trigger="click">
                操作
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button
                      v-if="scope.row.status === 0 && scope.row.rechargeMode === 2"
                      size="mini"
                      type="success"
                      @click="agree(scope.row.id)"
                      v-has-permission="['ums:recharge:success']"
                    >通过
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button
                      v-if="scope.row.status === 0 && scope.row.rechargeMode === 2"
                      size="mini"
                      type="danger"
                      @click="reject(scope.row.id)"
                      v-has-permission="['ums:recharge:reject']"
                    >驳回
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button size="mini" type="warning" @click="rechargeDelete(scope.row)"
                               v-has-permission="['ums:recharge:delete']">删除
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle2"
          @current-change="currentChangeHandle2"
          :current-page="pageIndex2"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize2"
          :total="totalPage2"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-card>
      <el-card class="card" v-show="status===3">
        <h3>{{ title }}</h3>
        <el-table v-loading="loading" :data="integrationList" border :header-cell-style="{background:'#EAE9E9FF'}">
          <el-table-column label="id" align="center" prop="id"/>
          <el-table-column label="用户id" align="center" prop="uid"/>
          <el-table-column label="昵称" align="center" prop="nickname"/>
          <el-table-column label="真实姓名" align="center" prop="realName"/>
          <el-table-column label="积分" align="center" prop="integration">
            <template slot-scope="scope">
              <div v-if="scope.row.integration < 0" style="color: red">{{ scope.row.integration }}</div>
              <div v-if="scope.row.integration > 0" style="color: green">{{ scope.row.integration }}</div>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                v-has-permission="['ums:integration:delete']"
                size="small"
                type="danger"
                icon="el-icon-delete"
                @click="intergrationDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle3"
          @current-change="currentChangeHandle3"
          :current-page="pageIndex3"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize3"
          :total="totalPage3"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-card>
      <!--表单组件-->
      <eForm ref="orderDetailForm"/>
    </div>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'
import {orderInfoByOrderSn} from "@/api/oms/order";
import {del, fundList} from "@/api/ums/fund";
import {refundHistoryList, reject, success} from "@/api/ums/userRecharge";
import {delIntegration_change_history, listIntegration_change_history} from "@/api/ums/integration";
import {memberList} from "@/api/ums/member";
import eForm from '@/views/oms/order/orderDetail'

export default {
  components: {
    CountTo, eForm
  },
  data() {
    return {
      title: '暂无数据',
      selectCard: undefined,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      pageIndex1: 1,
      pageSize1: 10,
      totalPage1: 0,
      pageIndex2: 1,
      pageSize2: 10,
      totalPage2: 0,
      pageIndex3: 1,
      pageSize3: 10,
      totalPage3: 0,
      MemberListLoading: false,
      count: {
        money: 0,
        one: 0,
        num: 0,
        integration: 0
      },
      dataForm: {
        uid: ''
      },
      status: 0,
      // 表格数据
      data: [],
      rechargeList: [],
      integrationList: [],
      memberList: [],
      // 表格 Loading 属性
      loading: false,


    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    getDataList() {
      if (this.dataForm.uid === '') {
        this.$message.info('请选择需查询的代理')
      } else {
        this.refundHistoryList(0)
        this.refundHistoryList(1)
        this.integrationHistoryList()
        this.fundList()
      }

    },
    getMemberList(query) {
      this.MemberListLoading = true
      let param = {
        query: query
      }
      memberList(param).then(res => {
        this.MemberListLoading = false
        this.memberList = res.data
      })
    },
    agree(id) {
      this.$confirm('是否通过该申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return success(id)
      }).then(() => {
        // this.$refs[id].doClose()
        this.rechargeList()
        this.$message.success('操作成功')
      })
    },
    reject(id) {
      this.$confirm('是否驳回该申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return reject(id)
      }).then(() => {
        // this.$refs[id].doClose()
        this.handleQuery()
        this.$message.success('操作成功')
      })
    },
    /** 删除按钮操作 */
    rechargeDelete(row) {
      const ids = row.id ? [row.id] : this.ids
      this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return del(ids)
      }).then(() => {
        // this.$refs[id].doClose()
        this.handleQuery()
        this.$message.success('操作成功')
      })
    },
    fundList() {
      if (this.dataForm.uid === '') {
        this.$message.info('请选择需查询的代理')
        return;
      }
      this.selectCard = 'card-1'
      this.status = 0
      this.title = '货款记录'
      let param = {
        'pageNum': this.pageIndex,
        'pageSize': this.pageSize,
        'uid': this.dataForm.uid
      }
      fundList(param).then(res => {
        this.data = res.data.list
        this.totalPage = res.data.totalCount
        this.count.money = res.data.totalCount
      })

    },
    refundHistoryList(type) {
      if (this.dataForm.uid === '') {
        this.$message.info('请选择需查询的代理')
        return;
      }
      let param = {}
      if (type === 0) {
        this.selectCard = 'card-2'
        this.title = '个人充值记录'
        this.status = 1
        param = {
          'pageNum': this.pageIndex1,
          'pageSize': this.pageSize1,
          'rechargeType': type,
          'uid': this.dataForm.uid
        }
      } else {
        this.selectCard = 'card-3'
        this.title = '下级充值记录'
        this.status = 2
        param = {
          'pageNum': this.pageIndex2,
          'pageSize': this.pageSize2,
          'rechargeType': type,
          'uid': this.dataForm.uid
        }
      }

      refundHistoryList(param).then(res => {
        this.rechargeList = res.data.list
        if (type === 0) {
          this.totalPage1 = res.data.totalCount
          this.count.one = res.data.totalCount

        } else {
          this.totalPage2 = res.data.totalCount
          this.count.num = res.data.totalCount
        }
      })
    },
    // 每页数(货款)
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.fundList()
    },
    // 当前页(货款)
    currentChangeHandle(val) {
      this.pageIndex = val
      this.fundList()
    },

    // 每页数(充值记录)
    sizeChangeHandle1(val) {
      this.pageSize1 = val
      this.pageIndex1 = 1
      this.refundHistoryList(0)
    },
    // 当前页(充值记录)
    currentChangeHandle1(val) {
      this.pageIndex1 = val
      this.refundHistoryList(0)
    },

    // 每页数(下级充值记录)
    sizeChangeHandle2(val) {
      this.pageSize2 = val
      this.pageIndex2 = 1
      this.refundHistoryList(1)
    },
    // 当前页(下级充值记录)
    currentChangeHandle2(val) {
      this.pageIndex2 = val
      this.refundHistoryList(1)
    },


    // 每页数(积分记录)
    sizeChangeHandle3(val) {
      this.pageSize3 = val
      this.pageIndex3 = 1
      this.integrationHistoryList()
    },
    // 当前页(积分记录)
    currentChangeHandle3(val) {
      this.pageIndex3 = val
      this.integrationHistoryList(0)
    },
    integrationHistoryList() {
      if (this.dataForm.uid === '') {
        this.$message.info('请选择需查询的代理')
        return;
      }
      this.selectCard = 'card-4'
      this.status = 3
      this.title = '积分记录'
      let param = {
        'pageNum': this.pageIndex3,
        'pageSize': this.pageSize3,
        'uid': this.dataForm.uid
      }
      listIntegration_change_history(param).then(res => {
        this.integrationList = res.data.list
        this.totalPage3 = res.data.totalCount
        this.count.integration = res.data.totalCount
      })
    },
    orderDetailHandler(orderSn) {
      if (orderSn) {
        orderInfoByOrderSn({'orderSn': orderSn}).then(res => {
          const _this = this.$refs.orderDetailForm
          _this.dialog = true
          _this.orderDetail = res.data
        })
      } else {
        this.$message({
          message: '订单不存在',
          type: 'error'
        })
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id ? [row.id] : this.ids
      this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return del(ids)
      }).then(() => {
        this.fundList()
        this.$message.success('操作成功')
      })
    },
    intergrationDelete(row) {
      const ids = row.id ? [row.id] : this.ids
      this.$confirm('是否确认删除积分变化历史记录编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delIntegration_change_history(ids)
      }).then(() => {
        this.integrationHistoryList()
        this.$message.success('删除成功')
      })
    },
  }
}

</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.card {
  margin-top: 40px;
  margin-left: 40px;
  margin-right: 40px;
}

.container {
  margin-top: 20px;
  margin-left: 20px;

}

.card-panel-select {
  background-color: rgba(193, 210, 240, 0.5) !important;
}
.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background-color: white;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  margin-right: 20px;

  .card-panel-icon-wrapper {
    float: left;
    margin: 14px 0 0 14px;
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }

  .card-panel-icon {
    float: left;
    font-size: 48px;
  }

  .card-panel-text {
    float: left;
    font-weight: bold;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.97);
    font-size: 16px;
    margin-top: 30px;
    margin-left: 20px;
  }

  .card-panel-num {
    float: right;
  }

  .card-panel-num {
    font-size: 20px;
    margin-top: 30px;
    margin-right: 20px;
  }

  .active {
    background-color: red;
  }
}

</style>

